<template>
  <div class="comment-wrapper">
    <v-header ref="header" title="评论详情"></v-header>
    <div class="main" ref="main">
      <div v-if="comment != null" class="comment">
        <div class="user-info">
          <img class="head-url" v-lazy="comment.headUrl" @click.stop="toMyInfo(comment.userId)"/>
          <div class="user-center">
            <p class="nickname">{{comment.nickname}}</p>
            <rater v-model="comment.rate" star="<i class='icon iconfont icon-scenic-star'/>" active-color="#ff7e00" :margin="2" :disabled="true" :font-size="12"></rater>
            <p class="time">{{comment.createAt | personifyTime }}</p>
          </div>
        </div>
        <p class="comment-content">
          {{comment.comment}}
        </p>
        <template  v-if="comment.matchImgUrl.length > 0">
          <div class="comment-atlas" v-for="(img, index) in comment.matchImgUrl" :key="index" v-if="index < 3" v-lazy:backgroundImage="img">
          </div>
        </template>
      </div>
      <div class="reply-wrapper" v-if="replyList.length > 0">
        <p class="reply-count">全部回复({{comment.replyCount}})</p>
        <ul class="reply-list">
          <li v-for="reply in replyList" :key="reply.id" @click="toShowInput(1, reply)">
            <div class="userinfo">
              <img v-lazy="reply.headUrl" @click.stop="toMyInfo(reply.userId)"/>
              <p class="center">
                <span>{{reply.userName}}</span>
                <span class="time">{{reply.createAt | personifyTime}}</span>
              </p>
            </div>
            <p class="reply-content">
              <span v-if="reply.targetType === 1">回复 <label class="primary" @click.stop="toMyInfo(reply.targetUserId)">{{reply.targetUserName}}</label>:</span>
              {{reply.comment}}</p>
          </li>
        </ul>
      </div>
    </div>
    <p class="edit-btn" @click="clickBottomBtn" :style="{paddingBottom: paddingBottom + 'px'}">
      <img src="../../../assets/img/edit_btn.png"/>
      <span>说点什么吧...</span>
    </p>
    <not-data v-if="comment == null" tip="没有找到评论详情~" v-cloak></not-data>
    <p v-if="comment != null && replyList.length === 0" tip="这条评论没有回复~" v-cloak></p>

    <bottom-input ref="bottomInput" v-model="showInput" @send="sendComment" :placeholder="placeholder"></bottom-input>

    <actionsheet v-model="showOptionMenu" @on-click-menu="clickActionSheet" :menus="optionMenus" :show-cancel="true"></actionsheet>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import NotData from '@/components/not-data/not-data'
import BottomInput from '@/components/bottom-input/bottom-input'
import { Rater, Actionsheet } from 'vux'

import axios from '@/api/axiosApi'
import { QINIU_PREFIX } from '@/api/config'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'

export default {
  data() {
    return {
      showInput: false,
      placeholder: '回复这条评论',
      showOptionMenu: false,
      optionMenus: {
        reply: '回复',
        delete: '删除'
      },
      comment: null,
      replyPageNum: 1,
      replyList: [],
      currentReply: null
    }
  },
  components: {
    VHeader, NotData, Rater, Actionsheet, BottomInput
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
    this._getComment()
  },
  mounted() {
    this.$refs.main.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight - 49 - this.paddingBottom + 'px'
  },
  methods: {
    _getComment() {
      axios.get(this, '/v1/productComment', {
        id: this.$route.params.commentId,
        pageSize: 10,
        pageNum: this.pageNum
      }, (data) => {
        if (data && data.length > 0) {
          data.forEach(item => {
            if (item.headUrl) {
              if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
                item.headUrl += '-bheader'
              }
            } else {
              item.headUrl = defaultAvatar
            }
            if (item.matchImgUrl) {
              item.matchImgUrl = item.matchImgUrl.split(';')
            }
          })
          this.comment = data[0]
          if (this.comment.replyCount > 0) {
            this._getReplyList()
          }
        }
      })
    },
    _getReplyList() {
      axios.get(this, '/v1/reply/' + this.comment.id, {
        pageNum: this.replyPageNum,
        pageSize: 10
      }, (data) => {
        if (data.length === 0) {
          if (this.replyPageNum > 1) {
            this.replyPageNum--
          }
        } else {
          data.forEach(item => {
            let tmpHeadUrl = defaultAvatar
            if (item.headUrl) {
              if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
                tmpHeadUrl = item.headUrl + '-bheader'
              } else {
                tmpHeadUrl = item.headUrl
              }
            }
            item.headUrl = tmpHeadUrl
          })
          if (this.replyPageNum <= 1) {
            this.replyList = data
          } else {
            this.replyList = this.replyList.concat(data)
          }
        }
      })
    },
    clickActionSheet(item) {
      if (item === 'reply') {
        this.toReport(1)
      }
    },
    clickBottomBtn() {
      this.currentReply = null
      this.toShowInput(0)
    },
    toShowInput(type, target) {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      this.showInput = true
      // 评论
      this.placeholder = '回复 ' + this.comment.nickname + ' 的评论'
      if (type === 1) {
        // 回复
        this.currentReply = target
        this.placeholder = '回复 ' + target.userName
      }
    },
    sendComment (val) {
      const t = val
      if (t.replace(/\s/g, '') === '') {
        this.$vux.toast.text('消息不能为空', 'middle')
        return
      }
      if (val.length > 90) {
        this.$vux.toast.text('回复文字不能超过90个字', 'middle')
        return
      }
      const user = localUser.get()
      const _self = this

      // 默认回复评论
      let params = {
        replyType: _self.$route.query.replyType, // _self.type,
        targetId: _self.comment.productId,
        targetType: 0,
        userId: user.id,
        comment: val,
        targetUserId: _self.comment.userId,
        targetCommentId: _self.comment.id
      }
      if (_self.currentReply != null) {
        // 回复 回复
        params.targetType = 1
        params.targetUserId = _self.currentReply.userId
      }
      // 经纬度
      const position = this.$store.getters.position
      if (position.length === 2) {
        params.longitude = position[0]
        params.latitude = position[1]
      }
      axios.post(this, '/v1/reply', params, (data) => {
        _self.showInput = false
        _self.comment.reply++
        _self.$refs.bottomInput.setContent('')
        _self.$vux.toast.text('回复成功', 'middle')

        data.createAt = '刚刚'
        data.userName = user.nickname
        data.headUrl = user.headUrl || defaultAvatar
        if (_self.currentReply) {
          data.targetUserName = _self.currentReply.userName
        }
        _self.replyList.splice(0, 0, data)

        axios.post(_self, '/v1/pushAlias', {
          userId: params.targetUserId,
          content: `${localUser.get('nickname')}回复了你：${val}`,
          linkUrl: `/comment/${_self.comment.id}`
        }, null, false)
      })
    },
    toMyInfo(userId) {
      this.$router.push(`/user/archives/${userId}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.comment-wrapper
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  z-index 100
  background #ffffff
  height 100%
.primary
  color $color-theme
.main
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
  overflow-x hidden
  overflow-y auto
.comment
  padding 20px 16px
  border-bottom 1px solid #e2e2e2
  .user-info
    display flex
    align-items center
    margin-bottom 20px
    line-height 1
    .head-url
      min-width 40px
      height 40px
      margin-right 8px
      border-radius 50%
    .nickname
      font-size 13px
      color #333
    .user-center
      width calc(100% - 48px)
    .time
      display inline-block
      color #999999
      font-size 12px
      float right
      margin-top -4px
      i
        margin-left 8px
        font-size 18px
  .comment-content
    font-size 15px
    color #333
    line-height 1.3
    no-wrap-n(3)
    margin-bottom 16px
  .comment-atlas
    width 100%
    height 171px
    border-radius 5px
    overflow hidden
    margin-bottom 16px
    background-size cover
    background-repeat no-repeat
    background-position center
    &:last-child
      margin-bottom 0
.reply-wrapper
  padding 20px 16px
  .reply-count
    font-size 16px
    color #333
    font-weight bold
    line-height 1
  .reply-list
    padding-bottom 20px
    li
      padding 16px 0
      border-bottom 1px solid #e2e2e2
      &:last-child
        border-bottom none
        padding-bottom 0
  .userinfo
    display flex
    justify-content space-between
    align-items center
    margin-bottom 10px
    img
      width 30px
      height 30px
      min-width 30px
      border-radius 50%
    .center
      width calc(100% - 38px)
      display flex
      justify-content space-between
      align-items center
      font-size 12px
      color #333
      .time
        color #999
  .reply-content
    font-size 15px
    color #333
    margin-left 38px
    display flex
    text-align justify
    span
      margin-right 12px
.edit-btn
  position fixed
  bottom 0
  left 0
  right 0
  height 48px
  line-height 48px
  border-top 1px solid #e2e2e2
  background #ffffff
  color #999
  font-size 15px
  padding 0 16px
  display flex
  align-items center
  box-shadow 0 0 15px #e2e2e2
  img
    width 32px
    height 32px
    margin-right 12px
</style>
